<template>
  <div class="home">
    <merchantNum />
    <div class="center" :class="{ prevButtonVisible: leftArrowVisbile, nextButtonVisible: rightArrowVisbile }" v-loading="homeLoading">
      <div class="prev-button" @click="prevCard" v-show="leftArrowVisbile">
        &lt;
      </div>
      <div class="card-wrap">
        <div class="card-content" :style="{ transform: `translateX(${cardPosition}vw)` }">
          <accountCardInfo v-for="(item, index) in cardInfoList" :key="index" :accountInfo="item" />
        </div>
      </div>
      <div class="next-button" @click="nextCard" v-show="rightArrowVisbile">
        &gt;
      </div>
    </div>
    <el-card class="bottom-card">
      <div class="chart-header">
        <div class="chart-title">資金變化</div>
        <el-select v-model="currentCurrency" placeholder="選擇貨幣" size="large" class="chart-select">
          <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="charts-container" ref="chartsContainer"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import accountCardInfo from "./components/accountCardInfo.vue";
import merchantNum from "@/components/merchantNum.vue";
import { useHome, useCardSlide, useEcharts } from '@/hooks/home'

const { homeLoading,cardInfoList } = useHome();
const chartsContainer = ref(null);
const { currentCurrency, currencies } = useEcharts(chartsContainer);
const { leftArrowVisbile, rightArrowVisbile, cardPosition, prevCard, nextCard } = useCardSlide(cardInfoList);


</script>
<style scoped lang="scss">
.home {
  :deep(.center) {
    margin-top: 31px;
    display: flex;
    // column-gap: 10px;
    position: relative;
    width: 1500px;
    // padding: 0 75px;

    .prev-button {
      width: 65px;
      height: 371px;
      color: #3d3d3d;
      font-weight: bold;
      font-size: 36px;
      position: absolute;
      left: 0;
      border-radius: 7px;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px #0000004c;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .next-button {
      width: 65px;
      height: 371px;
      color: #3d3d3d;
      font-weight: bold;
      font-size: 36px;
      position: absolute;
      right: 0;
      border-radius: 7px;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px #0000004c;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .card-wrap {
      width: 100%;
      overflow: hidden;
      display: flex;

      .card-content {
        display: flex;
        column-gap: 10px;
        transition: all 0.3s ease-in-out;
      }
    }

    .account-card_item {
      flex-shrink: 0;
      flex-grow: 0;
    }

    &.prevButtonVisible {
      padding-left: 75px;
    }

    &.nextButtonVisible {
      padding-right: 75px;
    }

    &.prevButtonVisible:not(.nextButtonVisible) {
      padding-right: 75px;
    }

    &.nextButtonVisible:not(.prevButtonVisible) {
      .next-button {
        right: 75px;
      }
    }
  }

  .bottom-card {
    margin-top: 26px;
    height: 386px;

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      height: 69px;
      padding-right: calc(var(--el-card-padding) * 3);

      .chart-title {
        color: #000000;
        font-weight: bold;
      }

      :deep(.chart-select) {
        width: 106px;
        height: 29px;

        .el-select__wrapper {
          background-color: #2fc2af;
          color: #fff;

          .el-select__selection {
            .el-select__selected-item {
              span {
                color: #fff;
              }
            }
          }

          .el-select__caret {
            color: #fff;
          }
        }
      }
    }

    .charts-container {
      height: 265px;
    }
  }
}
</style>
